<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Site Title -->
    <title>APEZ - Responsive Multi-Purpose HTML5 Template</title>
    <!-- Meta Description Tag -->
    <meta name="Description" content="APEZ - Responsive Multi-Purpose HTML5 Template">
    <!-- Favicon Icon -->
    <link rel="icon" type="image/x-icon" href="images/favicon.png" />
    <!-- Material Design Lite Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/material/material.min.css" />
    <!-- Material Design Select Field Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/material/mdl-selectfield.min.css">
    <!-- Animteheading Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/animateheading/animateheading.min.css" />
    <!-- Owl Carousel Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/owl_carousel/owl.carousel.min.css" />
    <!-- Animate Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/animate/animate.min.css" />
    <!-- Magnific Popup Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/magnific_popup/magnific-popup.min.css" />
    <!-- Flex Slider Stylesheet CSS -->
    <link rel="stylesheet" href="assets/plugin/flexslider/flexslider.min.css" />
    <!-- Custom Main Stylesheet CSS -->
    <link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
    <div class="wrapper">
        <!-- Start Header Section -->
        <header class="header">
            <div class="hdr-transparent">
                <div class="layer-stretch hdr pt-2 pb-2">
                    <div class="tbl">
                        <div class="tbl-row">
                            <!-- Start Header Logo Section -->
                            <div class="tbl-cell hdr-logo">
                                <a href="index.html"><img src="images/logo.png" alt=""></a>
                            </div><!-- End Header Logo Section -->
                            <div class="tbl-cell">
                                <div class="row justify-content-end pt-3 pb-3">
                                    <div class="col-sm-auto d-none d-sm-block d-md-block d-lg-block d-xl-block hdr-query-block">
                                        <div class="tbl-cell">
                                            <i class="far fa-envelope"></i>
                                        </div>
                                        <div class="tbl-cell text-left p-0">
                                            <p class="font-12 m-0 text-light">Have a query?</p>
                                            <p class="font-14 m-0 text-white font-500">support@pepdev.com</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-auto d-none d-sm-block d-md-block d-lg-block d-xl-block hdr-query-block">
                                        <div class="tbl-cell">
                                            <i class="fa fa-mobile font-28"></i>
                                        </div>
                                        <div class="tbl-cell text-left p-0">
                                            <p class="font-12 m-0 text-light">Want to Clarify?</p>
                                            <p class="font-14 m-0 text-white font-500">1800 000 000</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-auto pl-3 d-none d-sm-none d-md-block d-lg-block d-xl-block">
                                        <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect mdl-button--raised mdl-button--raised button button-primary button-pill">Get In Touch</button>
                                    </div>
                                </div>
                                <div id="menu-bar"><a><i class="fa fa-bars"></i></a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layer-stretch">
                    <div class="hdr-menu">
                        <!-- Start Menu Section -->
                        <ul class="menu text-left pl-0">
                            <li class="menu-megamenu-li">
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Home <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-megamenu menu-megamenu-small">
                                    <li class="row">
                                        <div class="col-lg-4">
                                            <ul>
                                                <li><a href="index.html">Home Style 1</a></li>
                                                <li><a href="index-1.html">Home Style 2</a></li>
                                                <li><a href="index-2.html">Home Style 3</a></li>
                                                <li><a href="index-3.html">Home Style 4</a></li>
                                                <li><a href="index-4.html">Home Style 5</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <ul>
                                                <li><a href="index-5.html">Home Style 6</a></li>
                                                <li><a href="index-6.html">Home Style 7</a></li>
                                                <li><a href="index-7.html">Home Style 8</a></li>
                                                <li><a href="index-8.html">Home Style 9</a></li>
                                                <li><a href="index-9.html">Home Style 10</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <ul>
                                                <li><a href="index-ecommerce.html">Home E-commerce</a></li>
                                                <li><a href="index-law.html">Home Law firm</a></li>
                                                <li><a href="index-property.html">Home Property</a></li>
                                                <li><a href="index-listing.html">Home Listing</a></li>
                                            </ul>
                                        </div>
                                    </li> 
                                </ul>
                            </li>
                            <li>
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Feature <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-dropdown">
                                    <li>
                                        <a>Property</a>
                                        <ul class="menu-dropdown">
                                            <li><a href="property-1.html">Property Listing 1</a></li>
                                            <li><a href="property-2.html">Property Listing 2</a></li>
                                            <li><a href="property-3.html">Property Listing 3</a></li>
                                            <li><a href="property-page.html">Property Page</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Page Header</a>
                                        <ul class="menu-dropdown">
                                            <li><a href="page-header-1.html">Page Header 1</a></li>
                                            <li><a href="page-header-2.html">Page Header 2</a></li>
                                            <li><a href="page-header-3.html">Page Header 3</a></li>
                                            <li><a href="page-header-4.html">Page Header 4</a></li>
                                            <li><a href="page-header-5.html">Page Header 5</a></li>
                                            <li><a href="page-header-6.html">Page Header 6</a></li>
                                            <li><a href="page-header-7.html">Page Header 7</a></li>
                                            <li><a href="page-header-8.html">Page Header 8</a></li>
                                            <li><a href="page-header-9.html">Page Header 9</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Page Footer</a>
                                        <ul class="menu-dropdown menu-dropdown-left">
                                            <li><a href="page-footer-1.html">Page Footer 1</a></li>
                                            <li><a href="page-footer-2.html">Page Footer 2</a></li>
                                            <li><a href="page-footer-3.html">Page Footer 3</a></li>
                                            <li><a href="page-footer-4.html">Page Footer 4</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Side Panel</a>
                                        <ul class="menu-dropdown">
                                            <li><a href="side-panel-1.html">Light Side Panel</a></li>
                                            <li><a href="side-panel-2.html">Dark Side Panel</a></li>
                                            <li><a href="side-panel-3.html">Colored Side Panel</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="popup.html">Popups</a></li>
                                    <li><a href="coming-soon.html">Coming Soon</a></li>
                                    <li><a href="404.html">404 Page Not Found</a></li>
                                    <li><a href="503.html">503 Temporarily Unavailable</a></li>
                                </ul>
                            </li>
                            <li class="menu-megamenu-li">
                                <a id="menu-pages" class="mdl-button mdl-js-button mdl-js-ripple-effect">Pages <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-megamenu">
                                    <li class="row">
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Service Styles</div>
                                            <ul>
                                                <li><a href="services-1.html">Services Style 1</a></li>
                                                <li><a href="services-2.html">Services Style 2</a></li>
                                                <li><a href="services-3.html">Services Style 3</a></li>
                                                <li><a href="services-4.html">Services Style 4</a></li>
                                                <li><a href="services-5.html">Services Style 5</a></li>
                                                <li><a href="services-6.html">Services Style 6</a></li>
                                                <li><a href="services-7.html">Services Style 7</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Team Styles</div>
                                            <ul>
                                                <li><a href="team-1.html">Team Style 1</a></li>
                                                <li><a href="team-2.html">Team Style 2</a></li>
                                                <li><a href="team-3.html">Team Style 3</a></li>
                                                <li><a href="team-4.html">Team Style 4</a></li>
                                                <li><a href="team-5.html">Team Style 5</a></li>
                                                <li><a href="team-6.html">Team Style 6</a></li>
                                                <li><a href="team-7.html">Team Style 7</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Shop Styles</div>
                                            <ul>
                                                <li><a href="shop-1.html">Shop Style 1</a></li>
                                                <li><a href="shop-2.html">Shop Style 2</a></li>
                                                <li><a href="shop-3.html">Shop Style 3</a></li>
                                                <li><a href="shop-4.html">Shop Style 4</a></li>
                                                <li><a href="shop-5.html">Shop Style 5</a></li>
                                                <li><a href="shop-6.html">Shop Style 6</a></li>
                                                <li><a href="shop-7.html">Shop Style 7</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Shop Styles</div>
                                            <ul>
                                                <li><a href="shop-8.html">Shop Style 8</a></li>
                                                <li><a href="shop-9.html">Shop Style 9</a></li>
                                                <li><a href="shop-10.html">Shop Style 10</a></li>
                                                <li><a href="shop-page-1.html">Product Page 1</a></li>
                                                <li><a href="shop-page-2.html">Product Page 2</a></li>
                                                <li><a href="shop-page-3.html">Product Page 3</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Info Pages</div>
                                            <ul>
                                                <li><a href="about-1.html">About Us Style 1</a></li>
                                                <li><a href="about-2.html">About Us Style 2</a></li>
                                                <li><a href="about-3.html">About Us Style 3</a></li>
                                                <li><a href="contact-1.html">Contact Us Style 1</a></li>
                                                <li><a href="contact-2.html">Contact Us Style 2</a></li>
                                                <li><a href="gallery-1.html">Gallery Style</a></li>
                                                <li><a href="faq.html">FAQ</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Other Pages</div>
                                            <ul>
                                                <li><a href="event-1.html">Event Style 1</a></li>
                                                <li><a href="event-2.html">Event Style 2</a></li>
                                                <li><a href="event-3.html">Event Style 3</a></li>
                                                <li><a href="event-4.html">Event Style 4</a></li>
                                                <li><a href="event-page-1.html">Event Details Page</a></li>
                                                <li><a href="signin.html">Sign In or Login</a></li>
                                                <li><a href="signup.html">Sign Up or Register</a></li>
                                            </ul>
                                        </div>
                                    </li> 
                                </ul>
                            </li>
                            <li>
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Portfolio <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-dropdown">
                                    <li>
                                        <a>Portfolio Default</a>
                                        <ul class="menu-dropdown menu-dropdown-left">
                                            <li><a href="portfolio-1.html">2 Column</a></li>
                                            <li><a href="portfolio-2.html">3 Column</a></li>
                                            <li><a href="portfolio-3.html">4 Column</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Portfolio Wide</a>
                                        <ul class="menu-dropdown menu-dropdown-left">
                                            <li><a href="portfolio-4.html">Wide Portfolio</a></li>
                                            <li><a href="portfolio-5.html">No Spacing Portfolio</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a>Portfolio Masonary</a>
                                        <ul class="menu-dropdown menu-dropdown-left">
                                            <li><a href="portfolio-6.html">3 Column Portfolio</a></li>
                                            <li><a href="portfolio-7.html">4 Column Portfolio</a></li>
                                            <li><a href="portfolio-8.html">Wide Portfolio</a></li>
                                            <li><a href="portfolio-9.html">No Spacing Portfolio</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="portfolio-grid.html">Portfolio Grid</a></li>
                                    <li><a href="portfolio-list.html">Portfolio List</a></li>
                                </ul>
                            </li>
                            <li class="menu-megamenu-li">
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Blogs <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-megamenu menu-megamenu-medium">
                                    <li class="row">
                                        <div class="col-lg-3">
                                            <div class="megamenu-ttl">Blog Grid Sytle</div>
                                            <ul>
                                                <li><a href="blogs-1.html">Blog 2 Column</a></li>
                                                <li><a href="blogs-2.html">Blog 3 Column</a></li>
                                                <li><a href="blogs-3.html">Blog 4 Column</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="megamenu-ttl">Blog List Sytle</div>
                                            <ul>
                                                <li><a href="blogs-9.html">Blog List</a></li>
                                                <li><a href="blogs-10.html">Blog List Left Sidebar</a></li>
                                                <li><a href="blogs-11.html">Blog List Right Sidebar</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="megamenu-ttl">Blog with Sidebar Sytle</div>
                                            <ul>
                                                <li><a href="blogs-4.html">Blog 1 Column Right Sidebar</a></li>
                                                <li><a href="blogs-5.html">Blog 2 Column Right Sidebar</a></li>
                                                <li><a href="blogs-6.html">Blog 3 Column Right Sidebar</a></li>
                                                <li><a href="blogs-7.html">Blog 2 Column Left Sidebar</a></li>
                                                <li><a href="blogs-8.html">Blog 3 Column Left Sidebar</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-2">
                                            <div class="megamenu-ttl">Blog Page</div>
                                            <ul>
                                                <li><a href="blog-1.html">Blog Detail 1</a></li>
                                                <li><a href="blog-2.html">Blog Detail 2</a></li>
                                            </ul>
                                        </div>
                                    </li> 
                                </ul>
                            </li>
                            <li class="menu-megamenu-li">
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">Components <i class="fa fa-chevron-down"></i></a>
                                <ul class="menu-megamenu menu-megamenu-small">
                                    <li class="row">
                                        <div class="col-lg-4">
                                            <div class="megamenu-ttl">Components Link</div>
                                            <ul>
                                                <li><a href="components/accordions.html"><i class="icon-plus mr-2"></i> Accordions</a></li>
                                                <li><a href="components/alerts.html"><i class="icon-exclamation mr-2"></i> Alerts</a></li>
                                                <li><a href="components/badges.html"><i class="icon-badge mr-2"></i> Badge</a></li>
                                                <li><a href="components/buttons.html"><i class="icon-star mr-2"></i> Buttons</a></li>
                                                <li><a href="components/cards.html"><i class="icon-credit-card mr-2"></i> Cards</a></li>
                                                <li><a href="components/dropcap.html"><i class="icon-bulb mr-2"></i> Dropcap</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="megamenu-ttl">Components Link</div>
                                            <ul>
                                                <li><a href="components/grid.html"><i class="icon-grid mr-2"></i> Grid</a></li>
                                                <li><a href="components/lists.html"><i class="icon-list mr-2"></i> Lists</a></li>
                                                <li><a href="components/panels.html"><i class="icon-speedometer mr-2"></i> Panels</a></li>
                                                <li><a href="components/pricingtable.html"><i class="fa fa-table mr-2"></i> Pricing Table</a></li>
                                                <li><a href="components/progressbars.html"><i class="icon-chart mr-2"></i> Progressbars</a></li>
                                                <li><a href="components/sliders.html"><i class="icon-compass mr-2"></i> Sliders</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="megamenu-ttl">Components Link</div>
                                            <ul>
                                                <li><a href="components/social-list.html"><i class="icon-list mr-2"></i> Social List</a></li>
                                                <li><a href="components/tables.html"><i class="fa fa-table mr-2"></i> Tables</a></li>
                                                <li><a href="components/tabs.html"><i class="icon-cursor mr-2"></i> Tabs</a></li>
                                                <li><a href="components/typography.html"><i class="icon-tag mr-2"></i> Typography</a></li>
                                            </ul>
                                        </div>
                                    </li> 
                                </ul>
                            </li>
                            <li class="menu-megamenu-li">
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect hdr-basket" href="#"><i class="fa fa-cart-plus"></i><span class="cart-count">2</span></a>
                                <ul class="menu-megamenu menu-cart">
                                    <li class="cart-overview">
                                        <a href="#" class="row">
                                            <div class="col-4 pr-0 cart-img">
                                                <img src="uploads/shop-11.jpg" alt="">
                                            </div>
                                            <div class="col-8 cart-details">
                                                <span class="title">Canvas Backpack</span>
                                                <span class="price">$39</span>
                                                <span class="qty">Quantity - 3</span>
                                                <div class="cart-remove"><i class="icon-close"></i></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="cart-overview">
                                        <a href="#" class="row">
                                            <div class="col-4 pr-0 cart-img">
                                                <img src="uploads/shop-31.jpg" alt="">
                                            </div>
                                            <div class="col-8 cart-details">
                                                <span class="title">Leather Wallet</span>
                                                <span class="price">$49</span>
                                                <span class="qty">Quantity - 3</span>
                                                <div class="cart-remove"><i class="icon-close"></i></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="row align-items-center">
                                        <div class="col-6">
                                            <a href="#" class="btn btn-dark text-white text-center">Checkout</a>
                                        </div>
                                        <div class="col-6 text-right">
                                            <p class="font-dosis font-20 m-0">Total : $98</p>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="mdl-button mdl-js-button mdl-js-ripple-effect hdr-search" href="#"><i class="fa fa-search"></i></a>
                            </li>
                            <li class="mobile-menu-close"><i class="fa fa-times"></i></li>
                        </ul><!-- End Menu Section -->
                    </div>
                </div>
                <div class="search-bar animated zoomIn">
                    <div class="search-content">
                        <div class="search-input">
                            <input type="text" placeholder="Enter your text ....">
                            <button class="search-btn"><i class="icon-magnifier"></i></button>
                        </div>
                    </div>
                    <div class="search-close"><i class="icon-close"></i></div>
                </div>
            </div>
        </header><!-- End Header Section -->
        <!-- Start Slider Section -->
        <div id="slider" class="slider-dark slider-colored slider-half slider-law">
            <div class="flexslider slider-wrapper">
                <ul class="slides">
                    <li>
                        <div class="slider-backgroung-image" style="background-image: url(uploads/slider-law-1.jpg);">

                            <div class="layer-stretch">
                                <div class="slider-info">
                                    <h1>Need Legal Advise. Hire Us</h1>
                                    <p>We have created 80+ Pages, 300+ Components or Shortcodes, Popup for this template and more in future. #twitterhash, @facebooktag</p>
                                    <div class="slider-button">
                                        <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect button button-primary button-pill">Explore More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="slider-backgroung-image" style="background-image: url(uploads/slider-law-2.jpg);">

                            <div class="layer-stretch">
                                <div class="slider-info">
                                    <h1>Got Legal Troble. Get Help</h1>
                                    <p>We have created 80+ Pages, 300+ Components or Shortcodes, Popup for this template and more in future. #twitterhash, @facebooktag</p>
                                    <div class="slider-button">
                                        <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect button button-primary button-pill">Explore More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div><!-- End Slider Section -->
        <!-- Start About Section -->
        <div class="about">
            <div class="layer-stretch">
                <div class="layer-wrapper">
                    <div class="layer-ttl"><h4>Who <span class="text-primary">We </span> Are</h4></div>
                    <div class="layer-sub-ttl">About our law firm. Our Practise Area.</div>
                    <div class="row pt-4">
                        <div class="col-md-5">
                            <img class="img-fluid img-shadow" src="uploads/about-us.jpg" alt="">
                        </div>
                        <div class="col-md-7">
                            <div class="about-container">
                                <p class="paragraph-black">Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
                                <div class="skills mt-3">
                                    <p class="font-14"> Criminal Law<span class="badge badge-dark badge-pill float-right">85%</span></p>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="skills mt-3">
                                    <p class="font-14">Business Law<span class="badge badge-dark badge-pill float-right">90%</span></p>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="skills mt-3">
                                    <p class="font-14">Health Law <span class="badge badge-dark badge-pill float-right">95%</span></p>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="skills mt-3">
                                    <p class="font-14">Divorce Law <span class="badge badge-dark badge-pill float-right">80%</span></p>
                                    <div class="progress progress-xs">
                                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End About Section -->
        <!-- Start Service Section -->
        <div class="service">
            <div class="layer-stretch">
                <div class="layer-wrapper pb-2">
                    <div class="layer-ttl"><h4>Practice <span class="text-primary">Areas</span></h4></div>
                    <p class="layer-sub-ttl">We are Crazy &#38; Creative Web Designer and Developer.</p>
                    <div class="row pt-4">
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="ti-desktop text-primary"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Business Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="ti-gallery text-success"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Health Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="ti-mobile text-secondary"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Divorce Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="icon-people text-info"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Criminal Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="ti-ruler-pencil text-warning"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Accident Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="service-card service-card-2">
                                <div class="tbl-cell">
                                    <div class="service-icon"><i class="ti-pencil-alt text-danger"></i></div>
                                </div>
                                <div class="tbl-cell">
                                    <div class="service-heading">Capital Law</div>
                                    <div class="service-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                        <a href="#" class="link-icon mt-2"><span>View More</span><i class="ti-angle-double-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End of Service Section -->
        <div class="testimonial-1">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-md-6 p-0">
                        <div class="testimonial">
                            <div class="testimonial-container owl-carousel owl-theme theme-owl-dot">
                                <div class="testimonial-block">
                                    <div class="testimonial-detail">
                                        <i class="fa fa-quote-right"></i>
                                        <p>"Etiam aliquet massa et lorem. Donec in ut odio libero, at vulputate urna. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo."</p>
                                    </div>
                                    <div class="testimonial-img">
                                        <div class="img">
                                            <img src="uploads/team-1.jpg" alt="">
                                        </div>
                                        <div class="person"> 
                                            <span>Daniel Barnes</span>
                                            <p>CEO At Devstab</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 p-0">
                        <div class="background"></div> 
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Team Section -->
        <div class="team">
            <div class="layer-stretch">
                <div class="layer-wrapper pb-20">
                    <div class="layer-ttl"><h4><span class="text-primary">Attorneys</span></h4></div>
                    <div class="row pt-4">
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="team-block team-block-03">
                                <div class="team-img">
                                    <img src="uploads/team-1.jpg" alt="">
                                </div>
                                <div class="team-container">
                                    <div class="team-details">
                                        <h3>John Snow</h3>
                                        <p>Co-Founder</p>
                                    </div>
                                    <div class="team-social">
                                        <ul>
                                            <li><a href="#"><i class="icon-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="icon-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="icon-social-dribbble"></i></a></li>
                                            <li><a href="#"><i class="icon-social-instagram"></i></a></li>
                                            <li><a href="#"><i class="icon-social-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="team-block team-block-03">
                                <div class="team-img">
                                    <img src="uploads/team-2.jpg" alt="">
                                </div>
                                <div class="team-container">
                                    <div class="team-details">
                                        <h3>Melissa Bates</h3>
                                        <p>Co-Founder</p>
                                    </div>
                                    <div class="team-social">
                                        <ul>
                                            <li><a href="#"><i class="icon-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="icon-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="icon-social-dribbble"></i></a></li>
                                            <li><a href="#"><i class="icon-social-instagram"></i></a></li>
                                            <li><a href="#"><i class="icon-social-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="team-block team-block-03">
                                <div class="team-img">
                                    <img src="uploads/team-3.jpg" alt="">
                                </div>
                                <div class="team-container">
                                    <div class="team-details">
                                        <h3>Sheldon Logo</h3>
                                        <p>Lead Desinger</p>
                                    </div>
                                    <div class="team-social">
                                        <ul>
                                            <li><a href="#"><i class="icon-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="icon-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="icon-social-dribbble"></i></a></li>
                                            <li><a href="#"><i class="icon-social-instagram"></i></a></li>
                                            <li><a href="#"><i class="icon-social-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="team-block team-block-03">
                                <div class="team-img">
                                    <img src="uploads/team-4.jpg" alt="">
                                </div>
                                <div class="team-container">
                                    <div class="team-details">
                                        <h3>Daniel Lewis</h3>
                                        <p>Front end Developer</p>
                                    </div>
                                    <div class="team-social">
                                        <ul>
                                            <li><a href="#"><i class="icon-social-facebook"></i></a></li>
                                            <li><a href="#"><i class="icon-social-twitter"></i></a></li>
                                            <li><a href="#"><i class="icon-social-dribbble"></i></a></li>
                                            <li><a href="#"><i class="icon-social-instagram"></i></a></li>
                                            <li><a href="#"><i class="icon-social-linkedin"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div><!-- End of Team Section -->
        <!-- Start Action Section -->
        <div class="action">
            <div class="layer-stretch">
                <div class="layer-wrapper text-center">
                    <div class="layer-ttl"><h4>We design <span class="text-primary">delightful</span> digital experiences</h4></div>
                    <div class="action-content">Read more about what we do and our philosophy of design. Judge for yourself The work and results we’ve achieved for other clients, and meet our highly experienced Team who just love to design, develop and deploy. Tell Us Your Story</div>
                    <a href="#" class="btn btn-outline btn-primary btn-pill btn-outline-2x btn-lg mt-3">Tell Us Your Story</a>
                </div>
            </div>
        </div><!-- End of Action Section -->
        <div class="blog">
            <div class="layer-stretch">
                <div class="layer-wrapper pb-3">
                    <div class="layer-ttl"><h4>Latest <span class="text-primary">News</span></h4></div>
                    <div class="layer-sub-ttl">Would you like to see more?</div>
                    <div class="row pt-4">
                        <div class="col-md-6 col-lg-4">
                            <div class="blog-card">
                                <img src="uploads/blog-1.jpg" alt="">
                                <div>
                                    <h4><a href="">iPhone X in Market</a></h4>
                                    <div class="blog-meta">
                                        <p><i class="icon-user"></i><span>Admin</span></p>
                                        <p><i class="icon-clock"></i><span>24 Jul</span></p>
                                        <p><i class="icon-bubble"></i><span>29</span></p>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa fuga officia, sint omnis corporis adipisci reprehenderit...</p>
                                    <a href="#"><span>Read More</span><i class="icon-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="blog-card">
                                <img src="uploads/blog-2.jpg" alt="">
                                <div>
                                    <h4><a href="">Creative Zone</a></h4>
                                    <div class="blog-meta">
                                        <p><i class="icon-user"></i><span>Admin</span></p>
                                        <p><i class="icon-clock"></i><span>24 Jul</span></p>
                                        <p><i class="icon-bubble"></i><span>29</span></p>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa fuga officia, sint omnis corporis adipisci reprehenderit...</p>
                                    <a href="#"><span>Read More</span><i class="icon-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="blog-card">
                                <img src="uploads/blog-3.jpg" alt="">
                                <div>
                                    <h4><a href="">Getting Bored. Try This.</a></h4>
                                    <div class="blog-meta">
                                        <p><i class="icon-user"></i><span>Admin</span></p>
                                        <p><i class="icon-clock"></i><span>24 Jul</span></p>
                                        <p><i class="icon-bubble"></i><span>29</span></p>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa fuga officia, sint omnis corporis adipisci reprehenderit...</p>
                                    <a href="#"><span>Read More</span><i class="icon-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="download-app">
            <div class="layer-stretch">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <i class="icon-layers"></i>
                    </div>
                    <div class="col-md-6 download-app-content">
                        <h5>Got legel Trouble. Consult us free of cost.</h5>
                        <p>Request a Free Consultation Send us email. Consult with our experienced team for complete solutions to your legal issues.</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <a href="#" class="download-app-btn"><i class="icon-envelope"></i><span>Send an Email</span></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start Footer Section -->
        <footer id="footer">
            <div class="layer-stretch">
                <!-- Start main Footer Section -->
                <div class="row layer-wrapper">
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Basic Info</p></div>
                        <div class="footer-container footer-a">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-map-marker"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">
                                            Your office, Building Name<br />
                                            Street name, Area<br />
                                            City, Country Pin Code
                                        </p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-phone"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">11122333333</p>
                                    </div>
                                </div>
                                <div class="tbl-row">
                                    <div class="tbl-cell"><i class="fa fa-envelope"></i></div>
                                    <div class="tbl-cell">
                                        <p class="paragraph-medium paragraph-white">hello@yourdomain.com</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Quick Links</p></div>
                        <div class="footer-container footer-b">
                            <div class="tbl">
                                <div class="tbl-row">
                                    <ul class="tbl-cell">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="about-1.html">About</a></li>
                                        <li><a href="event-1.html">Event</a></li>
                                        <li><a href="contact-1.html">Contact</a></li>
                                        <li><a href="portfolio-1.html">Portfolio</a></li>
                                        <li><a href="#">Link</a></li>
                                    </ul>
                                    <ul class="tbl-cell">
                                        <li><a href="signin.html">Sign In</a></li>
                                        <li><a href="signup.html">Sign Up</a></li>
                                        <li><a href="services-1.html">Services</a></li>
                                        <li><a href="Blogs-1.html">Blogs</a></li>
                                        <li><a href="Blog-1.html">Blog</a></li>
                                        <li><a href="team-1.html">Team</a></li>
                                        <li><a href="faq.html">Faq</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 footer-block">
                        <div class="footer-ttl"><p>Newsletter</p></div>
                        <div class="footer-container footer-c">
                            <div class="footer-subscribe">
                                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label form-input">
                                    <input class="mdl-textfield__input" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="subscribe-email">
                                    <label class="mdl-textfield__label" for="subscribe-email">Your Email</label>
                                    <span class="mdl-textfield__error">Please Enter Valid Email!</span>
                                </div>
                                <div class="footer-subscribe-button">
                                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect button button-primary">Submit</button>
                                </div>
                            </div>
                            <ul class="social-list social-list-colored footer-social">
                                <li>
                                    <a href="#" target="_blank" id="footer-facebook" class="fab fa-facebook"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-facebook">Facebook</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-twitter" class="fab fa-twitter"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-twitter">Twitter</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-google" class="fab fa-google"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-google">Google</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-instagram" class="fab fa-instagram"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-instagram">Instagram</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-youtube" class="fab fa-youtube"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-youtube">Youtube</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-linkedin" class="fab fa-linkedin"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-linkedin">Linkedin</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-flickr" class="fab fa-flickr"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-flickr">Flickr</span>
                                </li>
                                <li>
                                    <a href="#" target="_blank" id="footer-rss" class="fab fa-rss"></a>
                                    <span class="mdl-tooltip mdl-tooltip--top" data-mdl-for="footer-rss">Rss</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- End main Footer Section -->
            <!-- Start Copyright Section -->
            <div id="copyright">
                <div class="layer-stretch">
                    <div class="paragraph-medium paragraph-white">2017 © Pepdev ALL RIGHTS RESERVED.</div>
                </div>
            </div><!-- End of Copyright Section -->
        </footer><!-- End of Footer Section -->
    </div>
    <!-- **********Included Scripts*********** -->

    <!-- Jquery Library 2.1 JavaScript-->
    <script src="assets/plugin/jquery/jquery-2.1.4.min.js"></script>
    <!-- Popper JavaScript-->
    <script src="assets/plugin/popper/popper.min.js"></script>
    <!-- Bootstrap Core JavaScript-->
    <script src="assets/plugin/bootstrap/bootstrap.min.js"></script>
    <!-- Modernizr Core JavaScript-->
    <script src="assets/plugin/modernizr/modernizr.js"></script>
    <!-- Animaateheading JavaScript-->
    <script src="assets/plugin/animateheading/animateheading.js"></script>
    <!-- Material Design Lite JavaScript-->
    <script src="assets/plugin/material/material.min.js"></script>
    <!-- Material Select Field Script -->
    <script src="assets/plugin/material/mdl-selectfield.min.js"></script>
    <!-- Flexslider Plugin JavaScript-->
    <script src="assets/plugin/flexslider/jquery.flexslider.min.js"></script>
    <!-- Owl Carousel Plugin JavaScript-->
    <script src="assets/plugin/owl_carousel/owl.carousel.min.js"></script>
    <!-- Scrolltofixed Plugin JavaScript-->
    <script src="assets/plugin/scrolltofixed/jquery-scrolltofixed.min.js"></script>
    <!-- Magnific Popup Plugin JavaScript-->
    <script src="assets/plugin/magnific_popup/jquery.magnific-popup.min.js"></script>
    <!-- WayPoint Plugin JavaScript-->
    <script src="assets/plugin/waypoints/jquery.waypoints.min.js"></script>
    <!-- CounterUp Plugin JavaScript-->
    <script src="assets/plugin/counterup/jquery.counterup.js"></script>
    <!-- masonry Plugin JavaScript-->
    <script src="assets/plugin/masonry_pkgd/masonry.pkgd.min.js"></script>
    <!-- SmoothScroll Plugin JavaScript-->
    <script src="assets/plugin/smoothscroll/smoothscroll.min.js"></script>
    <!--Custom JavaScript-->
    <script src="dist/js/custom.js"></script>

</body>
</html>